<template>
    <div class="m-25 mt-65">
        <div class="normal-box-mod">
            <div class="normal-box-hd clearfix">
                <div class="normal-box-title">
                    <div class="decorate-square"></div>
                    <h2>角色类型管理</h2>
                </div>
            </div>
            <br>

            <div class="normal-box-bd">
                <div class="clearfix mb-20">
                    <Button type="primary" style="float:right" custom-icon="iconfont icon-fangkuai2" size="small" @click="show_create_user_modal">新建</Button>
                    <Input class="mr-10" v-model="search_key_words" placeholder="请输入类型名称" style="width: 200px"/>
                    <Button type="primary" custom-icon="iconfont icon-chaxun" size="small" @click="get_role_list_by_keywords">搜索</Button>
                </div>
				
                <div class="mb-20">
                    <Table border :loading="loading_role_list" :columns="role_list_columns" :data="user_list_data"></Table>
                </div>
                <div>
                    <Page :total="data_count" :page-size="limit"  :current=" current_page" show-total show-elevator  @on-change="changepage"></Page>
                </div>


                <!--新建修改角色-->
                <Modal v-model="modals.create_or_update_role_info.show_modal" :title="modals.create_or_update_role_info.modal_title" :loading="loading_post_role_data"
                    @on-ok="handle_post_user_info">
                    <Form ref="create_or_update_role_info_form" :model="modals.create_or_update_role_info.data" :rules="modals.create_or_update_role_info.rules"
                        :label-width="80">
                        <FormItem label="编码" prop="code">
                            <Input placeholder="请输入" v-model="modals.create_or_update_role_info.data.code" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="类型名称" prop="name">
                            <Input placeholder="请输入" v-model="modals.create_or_update_role_info.data.name" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="描述" prop="description">
                            <Input placeholder="请输入" v-model="modals.create_or_update_role_info.data.description" style="width:300px;"/>
                        </FormItem>
                    </Form>
                </Modal>
            </div>
        </div>
    </div>
</template>
<script>
    import {
        getRoleList,
        createRole,
        putRole,
        delRole
    } from "../../api/base_sys/base_manager";
    export default {
        data() {
            return {
                loading_role_list: false,
                data_count: 0,
                current_page: 1,
                limit: 5,
                search_key_words: "",
                loading_post_role_data: false,
                sex_list: [{
                        value: "男",
                        label: "男"
                    },
                    {
                        value: "女",
                        label: "女"
                    }
                ],
                modals: {
                    create_or_update_role_info: {
                        show_modal: false,
                        is_create: true,
                        modal_title: "新增角色",
                        rules: {
                            code: [{
                                required: true,
                                message: "请填写编码",
                                trigger: "blur"
                            }],
                            name: [{
                                required: true,
                                message: "请填写类型名称",
                                trigger: "blur"
                            }],
                            description: [{
                                required: true,
                                message: "请填写描述",
                                trigger: "blur"
                            }],
                        },
                        data: {
                            code: "",
                            name: "",
                            description: "",
                        }
                    }
                },
                role_list_columns: [{
                        title: "序号",
                        align: 'center',
                        key: "id",
                        width: 80,
                    },
                    {
                        title: "编码",
                        align: 'center',
                        minWidth:100,
                        key: "code"
                    },
                    {
                        title: "类型名称",
                        align: 'center',
                        minWidth:100,
                        key: "name"
                    },
                    {
                        title: "描述",
                        align: 'center',
                        minWidth:100,
                        key: "description",
                    },
                    {
                        title: "最后更新时间",
                        minWidth:100,
                        align: 'center',
                        key: ""
                    },
                    {
                        title: "最后更新人",
                        align: 'center',
                        minWidth:100,
                        key: ""
                    },
                    {
                        title: "最后主机",
                        align: 'center',
                        minWidth:100,
                        key: ""
                    },
                    {
                        title: "操作",
                        align: 'center',
                        key: "name",
                        minWidth:100,
                        // fixed: "right",
                        render: (h, params) => {
                            return h("div", [
                                // h(
                                //     "Button", {
                                //         props: {
                                //             type: "primary",
                                //             size: "small",

                                //         },
                                //         style: {
                                //             marginRight: "5px",
                                //             padding:"1px 2px"
                                //         },
                                //         on: {
                                //             click: () => {
                                //                 this.show_update_user_modal(params.index);
                                //             }
                                //         }
                                //     },
                                //     [h("Icon", { props: { type: "md-create", size: 18} })]
                                // ),
                                h(
                                  'Tooltip',
                                  {
                                    props: {
                                      placement: 'left',
                                      content: '编辑'
                                    },
                                    style: {
                                      cursor: 'pointer'
                                    }
                                  },
                                  [
                                    h(
                                      'Button',
                                      {
                                        props: {
                                          type: 'primary',
                                          size: 'small'
                                        },
                                        style: {
                                          marginRight: '5px',
                                          padding: '1px 2px'
                                        },
                                        on: {
                                          click: () => {
                                            this.show_update_user_modal(params.index);
                                          }
                                        }
                                      },
                                      [
                                        h('Icon', {
                                          props: {
                                            type: ' iconfont icon-bianjisekuai',
                                            size: 18
                                          }
                                        })
                                      ]
                                    )
                                  ]
                                ),
                                h(
                                  'Tooltip',
                                  {
                                    props: {
                                      placement: 'right',
                                      content: '删除'
                                    },
                                    style: {
                                      cursor: 'pointer'
                                    }
                                  },
                                  [
                                    h(
                                      'Button',
                                      {
                                        props: {
                                          type: 'error',
                                          size: 'small'
                                        },
                                        style: {
                                          marginRight: '5px',
                                          padding: '1px 2px'
                                        },
                                        on: {
                                          click: () => {
                                            this.del_user_confirm(params.index);
                                          }
                                        }
                                      },
                                      [
                                        h('Icon', {
                                          props: {
                                            type: ' iconfont icon-shanchusekuai',
                                            size: 18
                                          }
                                        })
                                      ]
                                    )
                                  ]
                                )
                                // h(
                                //     "Button", {
                                //         props: {
                                //             type: "error",
                                //             size: "small",

                                //         },
                                //         style: {
                                //             // marginRight: "5px"
                                //             padding:"1px 2px"
                                //         },
                                //         on: {
                                //             click: () => {
                                //                 this.del_user_confirm(params.index);
                                //             }
                                //         }
                                //     },
                                //     [h("Icon", { props: { type: "ios-trash-outline", size: 18 } })]
                                // )
                            ]);
                        }
                    }
                ],
                user_list_data: []
            };
        },
        methods: {
            /**
             * 获取角色列表数据
             */
            renderTableList() {
                const _this = this;
                this.loading_role_list = true;
                getRoleList({
                    page: this.current_page,
                    limit: this.limit,
                    name: this.search_key_words
                }).then(function (rs) {
                  // console.log(rs)
                    _this.user_list_data = rs.data.list;
                     _this.current_page=rs.data. current_page;
                    _this.data_count = rs.data.totalRecord;
                    _this.loading_role_list = false;
                });
            },
            /**
             * 切换分页
             */
            changepage(index) {
                this.current_page = index;
                this.renderTableList();
            },
            // 显示新建角色信息弹层
            show_create_user_modal() {
                this.modals.create_or_update_role_info.show_modal = true;
                this.modals.create_or_update_role_info.is_create = true;

                this.modals.create_or_update_role_info.data.id = undefined;
                this.modals.create_or_update_role_info.modal_title = "添加角色";
                this.modals.create_or_update_role_info.data = {};

            },
            // 显示修改角色信息弹层
            show_update_user_modal(index) {
                this.modals.create_or_update_role_info.show_modal = true;
                this.modals.create_or_update_role_info.is_create = false;
                this.modals.create_or_update_role_info.modal_title = "修改角色";

                this.modals.create_or_update_role_info.data = this.user_list_data[index];
                this.modals.create_or_update_role_info.data.password = undefined;
            },
            // 删除确认
            del_user_confirm(index) {
                const _this = this;

                const _id = this.user_list_data[index].id;
                const _name = this.user_list_data[index].name;
                const _code = this.user_list_data[index].code;

                this.$Modal.confirm({
                    title: "删除确认",
                    content: "<p>你确认要删除编码为 <strong class='color-red'>" +
                        _code +
                        "</strong> ,类型名称为 <strong class='color-red'>" +
                        _name +
                        "</strong> 的记录吗？删除后将无法恢复，请谨慎操作！</p>",
                    loading: true,
                    onOk: () => {
                        delRole(_id)
                            .then(function () {
                                _this.renderTableList();
                                _this.$Modal.remove();
                                _this.$Message.success("操作成功");
                            })
                            .catch(function (e) {
                                _this.$Message.error("操作失败" + e);
                            });
                    }
                });
            },
            // 搜索按钮
            get_role_list_by_keywords() {
                this.data_count = 0;
                this.current_page = 1;
                this.renderTableList();
            },
            // 提交添加删除角色表单
            handle_post_user_info() {
                this.$refs["create_or_update_role_info_form"].validate(valid => {
                    const _this = this;
                    if (valid) {
                        if (_this.modals.create_or_update_role_info.data.id) {
                            // 修改角色
                            putRole(_this.modals.create_or_update_role_info.data)
                                .then(function (rs) {
                                    _this.$Modal.remove();
                                    _this.$Message.success("操作成功");
                                    _this.renderTableList();
                                })
                                .catch(function (e) {
                                    _this.$Modal.remove();
                                    _this.$Message.error("操作失败" + e);
                                });
                        } else {
                            // 新增角色
                            createRole(_this.modals.create_or_update_role_info.data)
                                .then(function (rs) {
                                    _this.$Modal.remove();
                                    _this.$Message.success("操作成功");
                                    _this.renderTableList();
                                })
                                .catch(function (e) {
                                    _this.$Modal.remove();
                                    _this.$Message.error("操作失败" + e);
                                });
                        }
                    } else {
                        this.loading_post_role_data = false;
                        this.$nextTick(() => {
                            this.loading_post_role_data = true;
                        });
                        this.$Message.error("表单验证失败!");
                        return false;
                    }
                });
            }
        },
        created() {
            this.renderTableList();
        }
    };
</script>
